<template>
  <!-- 这里是支付成功的页面 -->
  <div style="height: 75vh">
    <el-scrollbar style="height: 100%">
      <el-row>
        <el-col :sm="24" :lg="24">
          <el-result
            icon="success"
            title="支付成功"
            subTitle="请根据提示进行操作"
          >
            <template slot="extra">
              <el-button type="primary" size="medium" round @click="returnHome"
                >返回首页</el-button
              >
              <el-button type="success" size="medium" round @click="watchOrder"
                >查看订单</el-button
              >
            </template>
          </el-result>
        </el-col>
        <el-col :sm="24" :lg="24">
          <el-collapse v-model="activeName" accordion>
            <el-collapse-item title="订单详情" name="1">
              <el-form label-position="left" inline class="demo-table-expand">
                <el-form-item label="订单编号">
                  <span>{{ orderList.orderNumber }}</span>
                </el-form-item>
                <el-form-item label="收货人名称">
                  <span>{{ orderList.consignee }}</span>
                </el-form-item>
                <el-form-item label="收货地址">
                  <span>{{ orderList.deliveryAddress }}</span>
                </el-form-item>
                <el-form-item label="收货人号码">
                  <span>{{ orderList.telephoneNumber }}</span>
                </el-form-item>
                <el-form-item label="支付金额">
                  <span>{{ orderList.paymentAmount }}</span>
                </el-form-item>
                <el-form-item label="支付方式">
                  <span>{{ orderList.paymentName }}</span>
                </el-form-item>
                <el-form-item label="发货状态">
                  <span>{{
                    orderList.deliveryStatus ? '已发货' : '待发货'
                  }}</span>
                </el-form-item>
              </el-form>
            </el-collapse-item>
            <el-collapse-item title="反馈" name="2">
              <div>客服QQ：81674944</div>
              <div>投诉邮箱：81674944@qq.com</div>
            </el-collapse-item>
          </el-collapse>
        </el-col>
      </el-row>
    </el-scrollbar>
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 订单信息数据
      orderList: {},
      // 默认激活的展开行
      activeName: "1",
      // 支付方式
      payName: ''
    }
  },
  // 钩子
  created () {
    // 从url中获取订单id
    const orderId = this.$route.query.id
    // 获取指定id的订单信息
    this.getOrderList(orderId)
  },
  methods: {
    // 获取订单信息
    async getOrderList (orderId) {
      const { data: res } = await this.$http.get('commodityOrders/id/' + orderId)
      if (res.meta.status !== 200) {
        // 获取订单信息失败
        this.$message.error('订单信息获取失败！')
      } else {
        // 获取订单信息成功
        console.log(res.data);
        // 将返回的数据中的commodityOrders订单信息赋值给orderList
        this.orderList = res.data.commodityOrders
      }
    },
    // 获取订单信息

    // 返回首页
    returnHome () {
      this.$router.push('/')
    },
    // 查看订单
    watchOrder () {
      this.$router.push('/myOrder')
    }
  }
}
</script>

<style scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
<style>
body .el-scrollbar__wrap {
  overflow-x: hidden;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
</style>